<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="nav">
        <a href="/home">首页</a>
        <a href="/server">服务</a>
        <a href="/mine">个人中心</a>
    </div>
    <div class="content">

    </div>
</body>
<script>
    //history路由
    //思路：点击不同的按钮，通过history.pushstate去切换不同的路由地址
    //然后根据不同的路由地址调用不同的函数去渲染不同的内容
    var as=document.querySelectorAll('a')
    as.forEach((item)=>{
        //给每个A标签绑定点击事件
        item.onclick=function(e){
            e.preventDefault()
            

            //借助history对象的pushstate()方法，添加一个新的历史记录
            //一旦添加，地址栏地址就会发生改变
            //This.href获取的是当前A标签的href的属性值
            history.pushState({} ,'',this.href)

            switch(location.pathname){
                case'/home':home_page();break
                case'/server':server_page();break
                case'/mine':mine_page();break
            }
            
            // return false//阻止A标签的默认行为（跳转到其他页面）
        }
    })
    


    //渲染首页内容
    function home_page(){
        document.querySelector('.content').innerHTML='首页的内容'
    }
    //渲染服务内容
    function server_page(){
        document.querySelector('.content').innerHTML='服务的内容'
    }
    //渲染个人中心
    function mine_page(){
        document.querySelector('.content').innerHTML='个人中心的内容'
    }
</script>
</html>